<script>
export default {
  name: "manage",
  data() {
    return {
      tableData: [],
      addDialog: false,
      form: {
        name: '',
        imgUrl: '',
        videoUrl: '',
        imgList: [],
        videoList: []
      },
      isEdit: false,
      idx: null
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    async list() {
      this.tableData = await this.$roleDb.get('data').value()
    },
    async add() {
      console.log(this.$refs.imgRef)
      this.form.imgUrl = this.$refs.imgRef.uploadFiles[0].raw ? this.$refs.imgRef.uploadFiles[0].raw.path : this.form.imgList[0].url
      this.form.videoUrl = this.$refs.videoRef.uploadFiles[0].raw ? this.$refs.videoRef.uploadFiles[0].raw.path : this.form.videoList[0].url
      if (!this.isEdit) {
        let db = this.$roleDb.get('data').push(this.form)
        await db.write()
        this.addDialog = false
        this.form = {}
        this.$router.go(0)
      } else {
        this.tableData[this.idx] = this.form
        this.$roleDb.set('data', this.tableData).write()
        this.idx = null
        this.addDialog = false
      }
      // await this.list()
    },
    edit(row, i) {
      this.isEdit = true
      this.idx = i
      row.imgList = [{url: row.imgUrl, name: row.imgUrl}]
      row.videoList = [{url: row.videoUrl, name: row.videoUrl}]
      this.form = row
      this.addDialog = true
    },
    async del(row, i) {
      this.idx = i
      let text = await this.$confirm('是否要删除' + row.name + '？')
      if (text === 'confirm') {
        this.tableData.splice(i, 1)
        this.$roleDb.set('data', this.tableData).write()
      }
    },
    beforeClose() {
      this.addDialog = false
      this.form = {}
    },
    openDialog() {
      this.isEdit = false
      this.addDialog = true
    }
  }
}
</script>

<template>
  <div class="role-manage">
    <el-card>
      <el-button size="small" type="primary" @click="openDialog">创建</el-button>
      <el-button size="small" @click="$router.push('/')">返回</el-button>
      <el-table
          ref="table"
          :height="1920/2.5"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="角色名称"
            prop="name"
        >
        </el-table-column>
        <el-table-column
            label="图片地址"
            prop="imgUrl"
        >
        </el-table-column>
        <el-table-column
            label="视频地址"
            prop="videoUrl">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="text" @click="edit(row,$index)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(row,$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        :before-close="beforeClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="addDialog"
        title="角色设置"
        width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="图片地址">
          <el-upload
              ref="imgRef"
              :auto-upload="false"
              :file-list="form.imgList"
              :limit="1"
              action=""
              class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-upload
              ref="videoRef"
              :auto-upload="false"
              :file-list="form.videoList"
              :limit="1"
              action=""
              class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <p slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </p>
    </el-dialog>

  </div>
</template>

<style lang="scss" scoped>

</style>